<template>
    <view class="pages">
        <custom-bar
            title=""
            :titleStyle="{color: '#B388FF', fontWeight: '500'}"
            background="transparent"
            back-icon=""
        ></custom-bar>
        <view class="header"> </view>
        <view class="body">
            <view class="login_card animate__animated animate__fadeIn">
                <view class="login_logo">
                    <image class="logo_icon" src="@/static/images/common/live@2x.png"></image>
                </view>
                <view class="item">
                    <view class="input_box" :class="{required: isRequired('user')}">
                        <image class="prefix_icon" src="@/static/images/login/user@2x.png"></image>
                        <input class="input" v-model="form.user" placeholder="请输入用户名" />
                        <view class="message_box">
                            <text class="message" v-if="isHandler">{{ isMessage('user') }}</text>
                        </view>
                    </view>
                </view>
                <view class="item">
                    <view class="input_box" :class="{required: isRequired('password')}">
                        <image class="prefix_icon" src="@/static/images/login/password@2x.png"></image>
                        <input class="input" v-model="form.password" placeholder="请输入密码" />
                        <view class="message_box">
                            <text class="message" v-if="isHandler">{{ isMessage('password') }}</text>
                        </view>
                    </view>
                </view>
                <view class="login_btn" @tap="handlerLogin">登录</view>
            </view>
        </view>
    </view>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator';
import {UserModule} from '@/store/modules/user';
@Component({
    components: {},
})
export default class Login extends Vue {
    public form: any = {
        user: '',
        password: '',
    };
    public rules: any = {
        user: [{required: true, message: '请输入用户名'}],
        password: [{required: true, message: '请输入密码'}],
    };
    public isHandler: boolean;
    constructor() {
        super();
        this.isHandler = false;
    }
    created() {
        // (this as any).$api.login({ name: "ztf" }).then((res: any) => {
        //   console.log("res", res);
        // });
    }
    onLoad(options: any) {
        console.log('UserModule.sessid', UserModule.sessid);
        UserModule.isLogin();
    }

    // 验证值值是否可为空
    isRequired(key: string) {
        const ttt = this.rules[key].some((rule: any) => rule.required);
        console.log('ttt', ttt);
        return ttt;
    }

    // 验证值是否为空
    isMessage(key: string) {
        if (!this.form[key] && this.isRequired(key)) {
            const item = this.rules[key].find((rule: any) => rule.required);
            if (item) return item.message;
        } else {
            return '';
        }
    }

    getUserInfo() {
        wx.getUserProfile({
            desc: '登录',
            success: async (res) => {
                const {avatarUrl, gender, nickName} = res.userInfo;
                const params = {
                    nick: nickName,
                    sex: gender,
                    avatar: avatarUrl,
                };
                console.log(params);
            },
            fail: (err) => {
                uni.showToast({
                    title: '用户信息授权失败',
                    icon: 'none',
                    duration: 3000,
                });
                console.log(err);
            },
        });
    }

    handlerLogin() {
        console.log(' Object.values(this.form)', Object.values(this.form));
        for (const value of Object.values(this.form)) {
            console.log('value', value);
            if (!value || value == '') return (this.isHandler = true);
        }
        UserModule.login();
    }
}
</script>

<style lang="scss" scoped>
.pages {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    background: #f0f0f0;
    background: url('https://images.pexels.com/photos/11350811/pexels-photo-11350811.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1')
        no-repeat top;
    background-size: 100% 417rpx;
    background-attachment: scroll;
    .header {
        padding: 16rpx;
        height: auto;
    }
    .body {
        margin: 0 auto;
        padding-top: 249rpx;
    }
    .login_card {
        width: 625rpx;
        padding: 56rpx 69rpx 0;
        height: 694rpx;
        background: #ffffff;
        box-shadow: 0rpx 21rpx 14rpx 1rpx rgba(115, 70, 209, 0.17);
        border-radius: 14rpx;
        .required::before {
            content: '*';
            display: block;
            font-size: 30rpx;
            color: red;
            position: absolute;
            left: -20rpx;
            height: auto;
            line-height: 1.5;
            top: 0;
        }
        .login_btn {
            margin-top: 90rpx;
            font-size: 22rpx;
            font-family: SourceHanSansCN;
            font-weight: 400;
            text-align: center;
            line-height: 69rpx;
            width: 486rpx;
            height: 69rpx;
            color: #ffffff;
            border: 1rpx solid #cccccc;
            border-radius: 35rpx;
            border-radius: 16rpx;
            background: url(@/static/images/login/login_btn@2x.png) no-repeat 100%;
        }
        .login_logo {
            width: inherit;
            height: 60rpx;
            margin: 0 auto 60rpx;
            margin-left: 50%;
            .logo_icon {
                transform: translateX(-50%);
                width: 80rpx;
                height: inherit;
            }
        }
        .item {
            height: 60rpx;
            line-height: 55rpx;
            margin-bottom: 49rpx;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .input_box {
                position: relative;
                width: 486rpx;
                height: 69rpx;
                border: 1rpx solid #cccccc;
                border-radius: 35rpx;
                border-radius: 16rpx;
                padding-left: 88rpx;
                .prefix_icon {
                    position: absolute;
                    left: 30rpx;
                    top: 16rpx;
                    width: 38rpx;
                    height: 38rpx;
                    pointer-events: none;
                }
                .message_box {
                    position: absolute;
                    left: 0;
                    top: 60rpx;
                    font-size: 16rpx;
                    color: red;
                    pointer-events: none;
                }
                .input {
                    height: inherit;
                    font-size: 22rpx;
                    font-family: SourceHanSansCN;
                    font-weight: 400;
                    color: #999999;
                }
            }
        }
    }
}
</style>
